<template>
  <div>
    <el-form :model="ruleForm" ref="ruleForm" label-width="100px" class="demo-ruleForm">
      <el-form-item label="标题:" prop="title">
        <el-input v-model="ruleForm.title"></el-input>
      </el-form-item>

      <el-form-item label="排序:" prop="title">
        <el-input v-model="ruleForm.sort"></el-input>
      </el-form-item>
      <el-form-item label="分类栏目"  prop="region">
        <el-select v-model="homeTypeName" placeholder="请选择分类栏目">
          <el-option
            v-for="item in typelist"
            :key="item.id"
            :label="item.typename"
            :value="item.id">
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="描述:">
        <el-input v-model="ruleForm.desc"></el-input>
      </el-form-item>
      <el-form-item label="资讯:">
        <el-button type="text" @click="dialogTableVisible = true">{{urlMsg}}</el-button>
      </el-form-item>
      <el-form-item label="图片:">
        <el-upload
          :limit=1
          action="http://www.yuzhekeji.club:8080/upload/uploadImg"
          :http-request="uploadImg"
          list-type="picture-card"
          :file-list="getImgList"
          :on-preview="handlePictureCardPreview"
          :on-remove="handleRemove"
          :on-success="handleSuccess">
          <i class="el-icon-plus"></i>
        </el-upload>
        <el-dialog :visible.sync="ruleForm.dialogVisible">
          <img width="100%" :src="ruleForm.dialogImageUrl" alt="">
        </el-dialog>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="submitForm('ruleForm')">更新</el-button>
      </el-form-item>
    </el-form>

    <el-dialog
      title="提示"
      :visible.sync="dialogVisible"
      width="30%"
      center
    >
      <span style="width:100%;text-align: center">{{ msg }}</span>
      <span slot="footer" class="dialog-footer">
    <el-button @click="dialogVisible = false">取 消</el-button>
    <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
          </span>
    </el-dialog>
    <!-- 资讯列表 -->
    <el-dialog title="资讯列表" :visible.sync="dialogTableVisible">
      <el-table :data="newsList">
        <el-table-column property="title" label="标题" width="150"></el-table-column>
        <el-table-column property="typename" label="栏目分类" width="200"></el-table-column>
        <el-table-column label="操作" width="300" align="center">
          <template slot-scope="scope">
            <el-button
              size="mini"
              type="danger"
              @click="handleSelect(scope.$index, scope.row)">选择</el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        v-show="isShowPagination"
        background
        layout="prev, pager, next"
        @current-change="handleCurrentChange"
        :total="total">
      </el-pagination>
    </el-dialog>
  </div>
</template>

<script>
import axios from 'axios'
export default {
  name: 'edit-home',
  data () {
    return {
      baseUrl: this.GLOBAL.BASE_URL + '/',
      typelist: [],
      dialogVisible: false,
      msg: '',
      newsList: [],
      urlMsg: this.$route.params.newsTitle,
      id: this.$route.params.id,
      newsId: this.$route.params.newsId,
      homeTypeName: this.$route.params.homeTypeId,
      total: 0,
      isShowPagination: false,
      dialogTableVisible: false,
      ruleForm: {
        title: this.$route.params.title,
        desc: this.$route.params.desc,
        dialogVisible: false,
        dialogImageUrl: '',
        imagePath: this.$route.params.imagePath,
        sort: this.$route.params.sort
      }
    }
  },
  methods: {
    handleRemove (file, fileList) {
      this.ruleForm.dialogImageUrl = ''
      this.ruleForm.dialogVisible = false
    },
    uploadImg (res) {
      let file = res.file
      let param = new FormData() // 创建form对象
      param.append('file', file)// 通过append向form对象添加数据
      // console.log(param.get('file')) // FormData私有类对象，访问不到，可以通过get判断值是否传进去
      let config = {
        headers: {'Content-Type': 'multipart/form-data'}
      } // 添加请求头
      axios.post('http://www.yuzhekeji.club:8080/upload/uploadImg', param, config)
        .then(response => {
          this.ruleForm.imagePath = response.data.data
        })
    },
    handlePictureCardPreview (file) {
      this.ruleForm.dialogImageUrl = file.url
      this.ruleForm.dialogVisible = true
      console.log(file.url)
    },
    submitForm (formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          this.saveHome()
        } else {
          console.log('error submit!!')
          return false
        }
      })
    },
    handleSuccess (res) {
      let status = res.status
      if (status === 200) {
        this.ruleForm.imagePath = res.data
      } else {
        this.dialogVisible = true
        this.msg = '图片上传失败'
      }
    },
    saveHome () {
      this.$http.get('/home/updateHome', {
        params: {
          id: this.id,
          title: this.ruleForm.title,
          desc: this.ruleForm.desc,
          imagePath: this.ruleForm.imagePath,
          newsId: this.newsId,
          homeTypeId: this.homeTypeName,
          sort: this.ruleForm.sort
        }
      }).then(res => {
        let data = res.data
        this.dialogVisible = true
        if (data.status === 200) {
          this.msg = '更新成功'
        } else {
          this.msg = data.msg
        }
      })
    },
    getNewsList (pageNumber) {
      this.$http.get('/news/getNewsList', {
        params: {
          pageNumber: pageNumber
        }
      }).then(res => {
        let data = res.data
        if (data.status === 200) {
          this.total = data.data.totalRow
          if (this.total > 0) {
            this.isShowPagination = true
          }
          this.newsList = data.data.list
        }
      })
    },
    handleCurrentChange (val) {
      this.getNewsList(val)
    },
    // 选择资讯
    handleSelect (index, row) {
      this.urlMsg = row.title
      this.newsId = row.id
      this.dialogTableVisible = false
    },
    getTypeList () {
      this.$http.get('/hometype/getHomeTypeList')
        .then(this.getTypeListInfoSucc)
    },
    getTypeListInfoSucc (res) {
      let data = res.data
      if (data.status === 200) {
        this.typelist = data.data
      }
    }
  },
  computed: {
    getImgList: function () {
      let fileList = [{url: ''}]
      console.log(fileList)
      if (this.ruleForm.imagePath === '') {
        fileList = []
        return fileList
      } else {
        fileList[0].url = this.baseUrl + this.ruleForm.imagePath
        return fileList
      }
    }
  },
  mounted () {
    this.getNewsList(1)
    this.getTypeList()
  }
}
</script>

<style scoped lang="stylus" rel="stylesheet/stylus">
.quill-editor
  color black
.article_content_item
  line-height 24px
</style>
